<template>
    <div class="ex-pictures">

        <Swiper
                :modules="[SwiperAutoplay, SwiperEffectCreative]"
                :loop="true"
                :effect="'creative'"
                :autoplay="{
                  delay: 8000,
                  disableOnInteraction: false,
                }"
                :creative-effect="{
                    prev: {
                      shadow: false,
                      translate: ['-20%', 0, -1]
                    },
                    next: {
                      translate: ['100%', 0, 0]
                    }
                  }"
                @swiper="onSwiper"
                @slideChange="onSlideChange"
        >
            <SwiperSlide v-for="(item, index) in mediaInfoList" :key="index">
                <div class="em-card">
                    <img class="swiper-img" :src="item.main_img.resourceUrl" @click="dialogVisible = true">
                </div>
            </SwiperSlide>
            <div class="swiper-button-prev" @click="prev"></div>
            <div class="swiper-button-next" @click="next"></div>
        </Swiper>
        <!--        <div class="ep-content" v-if="show">-->
        <!--            <div class="epc-card">-->
        <!--                <div class="epc-img">-->
        <!--                    <img :src="picUrl" @click="dialogVisible = true">-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="ep-content-footer">
            <div class="epc-feature-card">
                {{ des }}
            </div>
            <div class="em-more-btn" @click="goto">
                MediaInfos
            </div>
        </div>
    </div>
    <div class="dialogContent">
        <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
            <ImageDetail :picUrl="imgObj.resourceUrl"
                         :hqPicUrl="imgObj.hqResourceUrl"
                         :des="imgObj.des"
                         :title="imgObj.title"
                         :publishTime="imgObj.publishTime"></ImageDetail>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
    import {onMounted, ref} from 'vue'

    let show = ref(true);
    const config = useRuntimeConfig();
    const hostURL = config.public.hostURL;

    const props = defineProps({
        des: {
            type: String,
            required: false,
        },
        img: {
            type: Object,
            required: false,
        },
        article: {
            type: Object,
            required: false,
        },
    });

    const mediaInfoList = ref(props.article)
    const imgObj = ref(props.img ? props.img : "/images/car_pic/banner_on_00.jpg")
    const des = ref(props.des ? props.des : ``)
    const picUrl = ref(imgObj.value.resourceUrl ? imgObj.value.resourceUrl : "/images/car_pic/banner_on_00.jpg")
    const articleIndex = ref(-1);

    const dialogVisible = ref(false)

    const router = useRouter();
    const goto = () => {
        // window.open(`${hostURL}/article/${props.article.id}`, "_blank");
        if (articleIndex.value != -1)
            router.push(`/article/${articleIndex.value}`);
    }

    let swiper = ref();
    const onSwiper = (swp) => {
        // console.log(swiper)
        swiper.value = swp;
    }

    const onSlideChange = (item) => {
        imgObj.value = mediaInfoList.value[item.realIndex].main_img;
        articleIndex.value = mediaInfoList.value[item.realIndex].ref_article.id;
        // let arr = document.querySelectorAll('.epc-feature-card');
        // var nextPage = document.querySelector('.epc-card')

        // for (let i = 0; i < arr.length; i++) {
        //     arr[i].classList.toggle('fade-out');
        // }
        // setTimeout(() => {
        //     for (let i = 0; i < arr.length; i++) {
        //         arr[i].classList.toggle('fade-out');
        //     }
        //     des.value = mediaInfoList.value[item.realIndex].des
        // }, 300);

        des.value = mediaInfoList.value[item.realIndex].des

    }
    const next = () => {
        swiper.value.slideNext();
    };
    const prev = () => {
        swiper.value.slidePrev();
    };
</script>
<style scoped lang="scss">
    .ex-pictures {
        position: relative;
        padding: 0px 0px;
        background: #fff;
        width: 1920px;
        /*height: 1200px;*/
        background-image: linear-gradient(rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0) 50%,
                rgba(199, 142, 102, 0.2) 50%,
                rgba(199, 142, 102, 0.1) 67%,
                rgba(199, 142, 102, 0) 100%);


        .ep-content {
            width: 100%;
            // margin-bottom: 10px;
            // margin-top: 40px;

            .epc-card {
                overflow: hidden;
                cursor: pointer;

                .epc-img {
                    width: 1920px;
                    height: 1052px;
                    background-color: rgb(202, 201, 201);

                    img {
                        width: 1920px;
                        max-height: 1052px;
                        object-fit: cover;
                        transition: all 0.6s;
                    }
                }

            }

            .epc-card:hover .epc-img img {
                transform: scale(1.05);
            }

        }

        .ep-content-footer {
            width: 1740px;
            display: inline-flex;
            padding: 0px 160px;
            margin-top: 40px;

            .epc-feature-card {
                width: 800px;
                height: 100px;
                font-size: 16px;
                line-height: 24px;
                opacity: 1; /* 初始状态为隐藏 */
                transition: opacity 0.5s ease; /* 设置过渡效果 */
            }

            .fade-out {
                opacity: 0; /* 隐藏状态 */
            }

            .em-more-btn {
                width: 296px;
                height: 60px;
                line-height: 60px;
                margin-left: 504px;
                text-align: center;
                background: rgb(50, 115, 174, 0.08);
                border-bottom: 4px solid #3273AE;
                color: #000000;
                cursor: pointer;
                transition: background-color .3s;
                font-size: 16px;
                user-select: none;
            }

            .em-more-btn:hover {
                background-color: rgb(50, 115, 174, 0.38);
            }
        }

    }

    .dialogContent {
        :deep(.el-dialog) {
            width: 1024px;
            padding: 0px;
        }

        :deep(.el-dialog__header) {
            display: none;
        }

        :deep(.el-dialog__footer) {
            padding: 10px;
            padding-left: 32px;

        }


        .dialogVideoContent img {
            width: 1024px;
        }

        .detailContent {
            width: 1024px;
            padding: 10px 30px;


            .detailContent-left {
                width: 900px;
                display: inline-block;
                padding: 10px;

                .dialog-title {
                    line-height: 32px;
                    font-size: 22px;
                    color: #000;
                    // margin-top: 12px;
                    font-weight: 600;

                }

                .dialog-dsc {
                    line-height: 22px;
                    color: #000;
                    font-size: 100%;

                }

                .dialog-date {
                    margin-top: 12px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.25);
                }
            }

            .detailContent-right {
                width: 50px;
                display: inline-block;

                .emc-btn {
                    width: 32px;
                    height: 32px;
                    background-image: url('/images/home/组23@2x.png');
                    background-size: cover;
                    border: 2px dashed rgba(0, 0, 0, 0.2);
                    cursor: pointer;
                    transition: background-color .3s;
                }
            }
        }
    }

    .swiper {
        /*--swiper-theme-color: #ff6600; !* 设置Swiper风格 *!*/
        --swiper-navigation-color: rgba(255, 255, 255, 0.5); /* 单独设置按钮颜色 */
        --swiper-navigation-size: 50px; /* 设置按钮大小 */
    }

    .em-card {
        width: 1920px;
        height: 1080px;
        overflow: hidden;

        .swiper-img {
            width: 1920px;
            /*max-height: 1052px;*/
            height: 1080px;
            object-fit: cover;
            transition: all 0.6s;
            cursor: pointer;
        }
    }


    .swiper-img:hover {
        transform: scale(1.05);
    }

    .slide-fade-enter-active {
        transition-delay: 1s;
        transition: all 0.3s ease-out;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
